<template>
    <view class="content">
        <view class="wrapper">
            <view class="name-box">
                <view class="item">
                    <view><text style="color: #fe6155;">*</text>客户姓名</view>
                    <view class="item-r">
                        <input type="text" v-model="name" placeholder="输入姓名" placeholder-class="p-inp" class="inp">
                    </view>
                </view>
                <view class="u-p-b-25" v-if="nameList.length > 0">
                    <view class="name-list">
                        <view class="name-list-item" v-for="(el, ind) in nameList" :key="ind">
                            <view>
                                <view>姓名：{{ el.name }}</view>
                                <view>手机号：{{ el.phone }}</view>
                                <view>性别：{{ el.gender == 1 ? '男' : '女' }}</view>
                                <view v-if="el.id_number">身份证号：{{ el.id_number }}</view>
                                <view>带看楼盘：{{ el.pro }}</view>
                                <view v-if="el.remark">备注：{{ el.remark }}</view>
                            </view>
                            <image src="../../static/icon/del.png" class="del-icon" @click="delName(ind)"></image>
                        </view>
                    </view>
                </view>
            </view>
            <view class="name-box item">
                <view><text style="color: #fe6155;">*</text>客户手机号</view>
                <view class="item-r">
                    <input type="number" v-model="tel" placeholder="输入客户手机号" placeholder-class="p-inp" class="inp">
                </view>
            </view>
            <view class="name-box item">
                <view><text style="color: #fe6155;">*</text>客户性别</view>
                <view class="item-r sex-box">
                    <u-radio-group size="30" width="100" v-model="sex">
                        <u-radio 
                            @change="radioChange($event, nitem)" 
                            v-for="(nitem, nindex) in sexList" :key="nindex" 
                            :name="nitem.name"
                            :disabled="nitem.disabled"
                            shape="circle"
                            active-color="#fe6155"
                        >
                            {{nitem.name}}
                        </u-radio>
                    </u-radio-group>
                </view>
            </view>
            <!-- id_status 1需要全填 2填后六位 3不需要填 -->
            <view class="name-box item" v-if="idStatus != 3">
                <view v-if="idStatus == 1"><text style="color: #fe6155;">*</text>身份证</view>
                <view v-if="idStatus == 2"><text style="color: #fe6155;">*</text>身份证后六位</view>
                <view class="item-r">
                    <input type="idcard" v-if="idStatus == 1" v-model="idcard" placeholder="输入身份证" placeholder-class="p-inp" class="inp">
                    <input type="idcard" v-if="idStatus == 2" maxlength="6" v-model="idcard" placeholder="输入身份证后六位" placeholder-class="p-inp" class="inp">
                </view>
            </view>
            <view class="name-box">
                <view class="item">
                    <view><text style="color: #fe6155;">*</text>带看楼盘</view>
                    <view class="item-r2">
                        <view class="tjlp" v-if="!again" @click="addFloor">
                            <image src="../../static/icon/plus.png" class="plus-icon"></image>
                            <view>添加楼盘</view>
                        </view>
                    </view>
                </view>
                <view class="u-p-b-25" v-if="floorList && floorList.length > 0">
                    <view class="name-list">
                        <view v-for="(el, ind) in floorList" :key="ind">
                            <view>{{ el.name }}</view>
                            <image src="../../static/icon/del.png" class="del-icon" @click="delFloor(ind)"></image>
                        </view>
                    </view>
                </view>
            </view>
            <view class="remark">
                <view class="remark-top">
                    <view class="remark-tit">意向信息备注</view>
                    <view class="tjlp tjkh" v-if="!again" @click="addName">
                        <image src="../../static/icon/plus.png" class="plus-icon"></image>
                        <view>添加客户</view>
                    </view>
                </view>
                <textarea v-model="content" maxlength="200" placeholder="请输入备注" placeholder-class="p-inp"></textarea>
            </view>
        </view>
        
        <view class="btn" @click="doSubmit">立即报备</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                show: false,
                name: '',
                nameList: [],
                tel: '',
                sexList: [{name: '男',disabled: false}, {name: '女',disabled: false}],
                sex: '男',//1男 2女
                idcard: '',
                // floor: '',//楼盘
                floorList: [],
                content: '',//备注
                item: {},
                idStatus: 0,//id_status 1需要全填 2填后六位 3不需要填
                again: '',
            };
        },
        
        onLoad(option) {
            console.log('option',option)
            if (option.nitem) {
                // this.item = decodeURIComponent(JSON.parse(option.item))
                this.item = JSON.parse(option.nitem)
                console.log(this.item)
                this.idStatus = this.item.id_status
                this.floorList.push(this.item)
                //从重新报备页面进入
                if (this.item && this.item.username) {
                    this.name = this.item.username
                    this.tel = this.item.phone
                    this.idcard = this.item.id_number
                    this.content = this.item.remark
                    this.sex = this.item.gender == 1 ? '男' : '女'
                }
            }
            //从重新报备页面进入
            if (option.again) {
                this.again = option.again
            }
        },
        onShow(){
            // 接收 添加带看楼盘监听
            uni.$once('REPORT_FLOOR_LIST', (data) => {
                console.log('data',data)
                // console.log('length',this.floorList.length <= 0)
                let list = data.arr
                if (this.floorList && this.floorList.length <= 0) {
                    console.log('1111111')
                    this.floorList = list
                } else {
                    console.log('2222222')
                    this.floorList.forEach((cur, index) => {
                        list.forEach((el, eli) => {
                            if (cur.id == el.id) {
                                list.splice(eli, 1)
                            }
                        })
                    })
                    // console.log(this.floorList)
                    // console.log(list)
                    this.floorList = [...this.floorList, ...list]
                }
                // 重新判断需要填几位身份证号
                this.idStatus = 0
                this.idcard = ''
                var idArr = []
                this.floorList.forEach(cur => {
                    idArr.push(cur.id_status)
                })
                // 取数组中最小值
                this.idStatus = Math.min(...idArr)
                // console.log('this.floorList',this.floorList)
                // console.log('this.floorList',this.floorList, idArr, this.idStatus)
            })
        },
        onUnload() {
            uni.$off('REPORT_FLOOR_LIST')
        },
        methods: {
            // 立即报备
            doSubmit() {
                var arr = []
                if (this.nameList && this.nameList.length == 0) {
                    if (this.floorList.length == 0) {
                        this.$toast('请选择带看楼盘')
                        return
                    }
                    if (this.floorList.length > 5) {
                        this.$toast('带看楼盘最多可添加5个')
                        return
                    }
                    if (!this.name) {
                        this.$toast('请输入客户姓名')
                        return
                    }
                    if (!this.tel) {
                        this.$toast('请输入客户手机号')
                        return
                    }
                    if (!this.$checkPhone(this.tel)) {
                        this.$toast('手机号码格式不正确');
                        return false;
                    }
                    console.log('this.idStatus',this.idStatus)
                    if (this.idStatus == 1 || this.idStatus == 2) {
                        if (!this.idcard) {
                            this.$toast('请输入客户身份证号')
                            return
                        }
                        if (this.idStatus == 1) {
                            if (!this.$testIdCard(this.idcard)) {
                                this.$toast('身份证号码格式不正确');
                                return false;
                            }
                        }
                    }
                    let ids = []
                    if (this.floorList && this.floorList.length > 0) {
                        this.floorList.forEach(cur => {
                            ids.push(cur.id)
                        })
                    }
                    arr.push({
                        name: this.name,
                        phone: this.tel,
                        gender: this.sex == '男' ? 1 : 2, // 1男 2女
                        id_number: this.idcard,
                        remark: this.content,
                        pro_ids: ids.join(','),
                    })
                }
                
                if (this.nameList && this.nameList.length > 0 && this.nameList.length < 4) {
                    this.nameList.forEach((cur, index) => {
                        arr.push({
                            name: cur.name,
                            phone: cur.phone,
                            gender: cur.gender == '男' ? 1 : 2, // 1男 2女
                            id_number: cur.id_number,
                            remark: cur.remark,
                            pro_ids: cur.pro_ids,
                        })
                    })
                } else if (this.nameList && this.nameList.length > 3) {
                    this.$toast('客户最多可添加3个')
                    return
                }
                console.log('arr',arr)
                
                this.$ajax('user_reporting', {
                    user_token: this.$getSync('userToken'),
                    data: arr,//数组[{"name":"李四","phone":"13800000000","gender":"2","id_number":"654321","remark":"备注","pro_ids":"3"}]
                }).then(ret => {
                    if (ret.success == 1000) {
                        this.$toast('提交成功');
                        setTimeout(() => {
                            uni.$emit('KEHU')
                            this.$backT()
                        }, 500)
                    } else {
                        this.$toast(ret.msg);
                    }
                });
            },
            
            // 添加客户信息
            addName() {
                if (this.floorList.length == 0) {
                    this.$toast('请选择带看楼盘')
                    return
                }
                if (this.floorList.length > 5) {
                    this.$toast('带看楼盘最多可添加5个')
                    return
                }
                if (!this.name) {
                    this.$toast('请输入客户姓名')
                    return
                }
                if (!this.tel) {
                    this.$toast('请输入客户手机号')
                    return
                }
                if (!this.$checkPhone(this.tel)) {
                    this.$toast('手机号码格式不正确');
                    return false;
                }
                
                console.log('this.idStatus',this.idStatus)
                if (this.idStatus == 1 || this.idStatus == 2) {
                    if (!this.idcard) {
                        this.$toast('请输入客户身份证号')
                        return
                    }
                    if (this.idStatus == 1) {
                        if (!this.$testIdCard(this.idcard)) {
                            this.$toast('身份证号码格式不正确');
                            return false;
                        }
                    }
                }
                
                let ids = [], floor = []
                if (this.floorList && this.floorList.length > 0) {
                    this.floorList.forEach(cur => {
                        ids.push(cur.id)
                        floor.push(cur.name)
                    })
                }
                this.nameList.push({
                    name: this.name,
                    phone: this.tel,
                    gender: this.sex == '男' ? 1 : 2, // 1男 2女
                    id_number: this.idcard,
                    remark: this.content,
                    pro_ids: ids.join(','),
                    pro: floor.join(',')
                })
                this.name = ''
                this.tel = ''
                this.idcard = ''
                this.content = ''
                this.floorList = []
                console.log(this.nameList)
            },
            // 删除信息
            delName(index) {
                this.nameList.splice(index, 1)
            },
            // 添加楼盘
            addFloor() {
                this.$gTo('/pages/index/floor-list?report=1')
            },
            // 删除楼盘
            delFloor(index) {
                this.floorList.splice(index, 1)
                // 重新判断需要填几位身份证号
                this.idStatus = 0
                this.idcard = ''
                var idArr = []
                this.floorList.forEach(cur => {
                    idArr.push(cur.id_status)
                })
                // 取数组中最小值
                this.idStatus = Math.min(...idArr)
                console.log('delFloor',this.floorList)
            },
            // 选择性别
            radioChange(e, nitem) {
                console.log('radioChange',e, nitem);
                if (e == '男') {
                    this.sex = e
                } else {
                    this.sex = e
                }
            },
        }
    };
</script>

<style lang="scss">
    .item-r2{
        height: 100rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .tjlp{
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 28rpx;
        line-height: 1;
        color: #803906;
        background-color: #ffecd2;
        padding: 15rpx 30rpx;
        border-radius: 50rpx;
    }
    .tjkh{
        background-color: #c1ebfa;
    }
    .plus-icon{
        width: 24rpx;
        height: 25rpx;
        margin-right: 10rpx;
    }
    
    
    .add-kh-btn{
        font-size: 28rpx;
        padding: 20rpx 30rpx;
        background-color: #c1ebfa;
        color: #000;
        border-radius: 50rpx;
    }
    
    page{
        background-color: #f5f5f5;
    }
    .content{
        padding: 20rpx;
    }
    .wrapper{
        background-color: #fff;
        border-radius: 20rpx;
        padding: 0 20rpx;
    }
    .name-box{
        border-bottom: 2rpx solid #e6e6e6;
    }
    .name-box:last-child{
        border-bottom: none;
    }
    .item{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .item-r{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .inp{
        width: 350rpx;
        height: 100rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: right;
    }
    .p-inp{
        color: #acacac;
    }
    .add-icon{
        width: 152rpx;
        height: 56rpx;
        margin-left: 10rpx;
    }
    .name-list{
        background-color: #fafafa;
        padding: 15rpx 20rpx;
        border-radius: 5rpx;
    }
    .name-list>view{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15rpx 0;
    }
    .name-list>view>view{
        flex: 1;
        font-size: 24rpx;
    }
    .name-list-item{
        border-bottom: 2rpx solid #e6e6e6;
    }
    .name-list-item:last-child{
        border-bottom: none;
    }
    .del-icon{
        width: 25rpx;
        height: 26rpx;
        margin-left: 10rpx;
    }
    .sex-box{
        width: 200rpx;
        height: 100rpx;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .remark{
        padding: 30rpx 0;
    }
    .remark-top{
        padding-bottom: 15rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .remark-tit{
        
    }
    textarea{
        width: 100%;
        background-color: #fafafa;
        padding: 25rpx;
    }
    
    
    .btn{
        color: #fff;
        font-size: 36rpx;
        padding: 25rpx;
        text-align: center;
        background-color: #00a1e9;
        border-radius: 50rpx;
        margin-top: 50rpx;
    }
    
</style>
